<template>
  <div class="index-container">
    <div class="warpper">
      <h1 class="demo-home__title">
        <div class="searchcontainer">
          <input
            type="text"
            :placeholder="title"
            class="search"
            v-model="query"
          >
          <el-button
            class="btnsearch"
            @click="search()"
          >
            <van-icon name="search" />
          </el-button>
        </div>
      </h1>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: '',
      title: '搜索'
    }
  },
  mounted() {},
  methods: {
    search() {
      console.log(11111, this.query)
    }
  }
}
</script>

<style lang="scss" scoped>
.index-container {
  .warpper {
    padding: 15px;
    .demo-home__title {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 0 6px;
      // font-size: 56px;
      .demo-home__title img,
      .demo-home__title span {
        display: inline-block;
        vertical-align: middle;
      }
      img {
        width: 64px;
      }
      // span {
      //   margin-left: 16px;
      //   font-weight: 500;
      // }
    }
    .demo-home__desc {
      text-align: center;
      margin: 0 0 20px;
      color: rgba(69, 90, 100, 0.6);
      font-size: 28px;
    }
    .searchcontainer {
      margin-top: 4%;
      height: 60px;
      // height: 100vh;
      display: flex;
      justify-content: center; /*水平方向居中*/
      align-items: center; /*垂直方向居中*/
      // background-color: thistle;
    }
    /* 搜索框样式 */
    .search {
      width: 450px;
      height: 100%;
      // background-image: url(搜索.png); /*搜索框背景图片*/
      background-repeat: no-repeat; /*设置背景图片不平铺*/
      border-radius: 30px 0px 0px 30px;
      padding-left: 50px;
      background-position: 10px 10px; /*设置背景图片的位置*/
      // color: darkgray;
      font-size: 18px;
      border: none; /*去除边框*/
    }
    /* 搜索框获得焦点时样式 */
    .search:focus {
      // outline: coral solid 1px; /*添加外边框*/
    }
    /* 搜索按钮样式 */
    .btnsearch {
      width: 110px;
      height: 100%;
      border: none;
      background-color: white;
      // color;
      // background-color: coral;
      // color: #fff;
      border-radius: 0px 20px 20px 0px;
      font-size: 20px;
      cursor: pointer;
    }
    /* 按钮悬浮时样式 */
    .btnsearch:hover {
      // background-color: #ff5900;
    }
  }
}
</style>
